<template>
  <!-- 离线记录 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="电站：">
        <a-select
          v-model:value="filterForm.stationId"
          class="formInput"
          placeholder="请选择"
          @change="changeStation"
          allow-clear
          show-search
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in stationList"
            :value="item.stationId"
            :key="item.stationId"
            :label="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池堆：">
        <a-select
          v-model:value="filterForm.linkId"
          class="formInput"
          placeholder="请选择"
          :disabled="!filterForm.stationId"
          allow-clear
        >
          <a-select-option
            v-for="item in energyLinkList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="在线状态：">
        <a-select
          v-model:value="filterForm.status"
          class="formInput"
          placeholder="请选择"
          allow-clear
        >
          <a-select-option
            v-for="item in ONLINE_STATUS"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="离线类型：">
        <a-select
          v-model:value="filterForm.equipType"
          class="formInput"
          placeholder="请选择"
          allow-clear
        >
          <a-select-option
            v-for="item in OFFLINE_TYPE.filter((item) => item.value !== 3)"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="getOfflineRecordPage"
        >查询</a-button
      >
    </a-form>
  </div>
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
      :scroll="tableScroll"
      class="custom-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'onlineStatusName'">
          <span
            :class="[record.onlineStatus === 0 ? 'red' : 'green', 'radio']"
            >{{ record.onlineStatusName }}</span
          >
        </template>

        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleCheck(record)"
            >历史离线记录</a-button
          >

          <a-button type="link" disabled>转工单</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getOfflineRecordPage"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
  <!-- 历史记录弹窗 -->
  <TempData
    :tempDataVisible="tempDataVisible"
    :rowData="rowData"
    @update:tempDataVisible="(val) => (tempDataVisible = val)"
  ></TempData>
</template>
<script setup>
// 
import { commonConfigStore } from "@/stores/commonConfig"
import { ONLINE_STATUS, OFFLINE_TYPE } from "@/constants/stationConfig"
import TempData from "./conpoments/tempData.vue"
import { formatMillisecondsToDHM } from "@/utils/common"
import useTableScroll from "@/hooks/useTableScroll"
const $api = inject("$api")


const router = useRouter()
const filterForm = ref({
  stationId: null,
  linkId: null,
  status: null,
  equipType: null,
  current: 1,
  size: 20,
})
// // 判断表格是否超过屏幕高度
// const tableScroll = computed(() => {
//   const tableContainer = document.querySelector(".tableContent")
//   if (tableContainer) {
//     const tableHeight = tableContainer.clientHeight
//     const windowHeight = window.innerHeight
//     return tableHeight > windowHeight
//       ? { x: "max-content", y: "calc(100vh - 300px)" }
//       : { x: "max-content" }
//   }
//   return { x: "max-content" }
// })
onMounted(() => {
  getStationList()
  getOfflineRecordPage()
})

//请求所有电站
const stationList = ref([])
const getStationList = async (id) => {
  const params = { companyId: id }
  const res = await $api.companyStationtList(params)
  if (res && res.code === 0) {
    stationList.value = res.data
  }
}
//选中电站
const changeStation = (val) => {
  filterForm.value.linkId = null
  getEnergyLinkList(val)
}
//请求电池堆
const energyLinkList = ref([])
const getEnergyLinkList = async (id) => {
  const params = { stationId: id }
  const res = await $api.energyLinkList(params)
  if (res && res.code === 0) {
    energyLinkList.value = res.data
  }
}
//表格数据
const tableLoading = ref(false)
const tableData = ref([])
const total = ref()
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 50,
    align: "center",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 220,
    align: "center",
  },
  /* {
    title: "当前在线状态",
    dataIndex: "onlineStatusName",
    key: "onlineStatusName",
    width: 100,
    align: "center",
  }, */
  {
    title: "离线类型",
    dataIndex: "equipTypeName",
    key: "equipTypeName",
    width: 120,
    align: "center",
  },
  {
    title: "离线设备名称",
    dataIndex: "equipName",
    key: "equipName",
    width: 100,
    align: "center",
  },
  {
    title: "最近离线时间",
    dataIndex: "dropTime",
    key: "dropTime",
    width: 160,
    align: "center",
  },
  /* {
    title: "最近上线时间",
    dataIndex: "onlineTime",
    key: "onlineTime",
    width: 160,
    align: "center",
  },
  {
    title: "离线时长",
    dataIndex: "offTime",
    key: "offTime",
    width: 140,
    align: "center",
  }, 
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 180,
    align: "center",
    fixed: "right",
  },*/
]

const enumMap = {
  0: "离线",
  1: "在线",
}
const equipTypeNameMap = {
  1: "电池堆",
  2: "结算电表",
  3: "摄像头",
}

const getOfflineRecordPage = async () => {
  tableLoading.value = true
  const res = await $api.offlineRecordPage(filterForm.value)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records.map((item, index) => ({
      ...item,
      index: index + 1,
      offTime: item.hasOwnProperty("offTime")
        ? formatMillisecondsToDHM(item.offTime)
        : "--",
      onlineStatusName: enumMap[item.onlineStatus], // 替换为中文描述
      equipTypeName: equipTypeNameMap[item.equipType], // 替换为中文描述
    }))
    total.value = res.data.total
  }
}

//历史记录弹窗
const tempDataVisible = ref(false)
const rowData = ref({})
const handleCheck = (data) => {
  rowData.value = data
  tempDataVisible.value = true
}
const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
.radio {
  position: relative;
}
.red {
  color: red;
  &:before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.green {
  color: #46bb46;
  &:before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #46bb46;
    border-radius: 50%;
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
